<!--
 * @Author: zhangyonggui
 * @Date: 2023-10-10 10:57:06
 * @LastEditors: zhangyonggui
 * @LastEditTime: 2023-10-12 13:39:04
 * @Descripttion: 资产暴露路径
-->
<template>
  <div class="exposurePath-container">
    <div class="path-head">
      <span class="blue">发现方式</span>
      <span class="green">暴露关系-存在</span>
      <span class="yellow">暴露关系-可能存在</span>
    </div>
    <div class="path-content">
      <div v-if="branchList.length" class="center-box">
        <div class="path-box">
          <!-- 分支 -->
          <div class="branch">
            <div v-for="(path, i) in branchList" :key="i" class="path">
              <!-- 节点一 -->
              <div class="node">
                <img
                  :src="discoveryModePic[path.discoveryMode]"
                  width="20"
                  height="20"
                  alt=""
                />
                <span class="existence" style="color: #3a7dff">{{
                  path.discoveryMode
                }}</span>
              </div>
              <div class="line end-arrow"></div>
              <!-- 节点二 -->
              <div>
                <div class="node">
                  <img
                    src="@/static/images/retrieval/web.png"
                    width="20"
                    height="20"
                    alt=""
                  />
                  <span :title="path.exposeSource" class="existence">{{
                    path.exposeSource
                  }}</span>
                </div>
                <div
                  class="line"
                  :class="{
                    'end-arrow': !isBorder(i),
                    spot: !!path.exposeRelation,
                  }"
                ></div>
              </div>
            </div>
          </div>
          <!-- 目标 -->
          <div
            :class="[isMultiple ? 'multiple-target' : 'target']"
            :style="`width: ${200 * branchList.length}px`"
          >
            <div v-if="isMultiple" class="multiple-target-line"></div>
            <div v-if="isMultiple" class="multiple-target-arrow"></div>
            <div class="node" style="height: 26px">
              <img
                src="@/static/images/retrieval/target.png"
                width="26"
                height="26"
                alt=""
              />
              <span :title="targetPoint" class="existence target-name">{{
                targetPoint
              }}</span>
            </div>
          </div>
        </div>
      </div>
      <noData v-else></noData>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { defineProps, ref, reactive, onMounted, computed } from 'vue';
import { useStore } from 'vuex';
const store = useStore();
const props = defineProps({
  rowList: {
    type: Object,
    default: () => {
      return {};
    },
  },
});
const branchList = ref<any>([]);
const discoveryModePic = reactive({
  爬虫: require(`@/static/images/retrieval/pachou.png`),
  开源: require(`@/static/images/retrieval/kaiyuan.png`),
  扫描: require(`@/static/images/retrieval/scanning.png`),
  查询: require(`@/static/images/retrieval/search.png`),
});
const isMultiple = computed(() => {
  return branchList.value?.length > 1;
});
const isBorder = computed(() => {
  return (i) => {
    return isMultiple.value && (i === 0 || i === branchList.value?.length - 1);
  };
});
const targetPoint = computed(() => {
  return (branchList.value?.length && branchList.value[0].targetPoint) || '';
});
onMounted(() => {
  getExposurePath();
});
const getExposurePath = async () => {
  const { code, data } = await store.dispatch(
    'detail/getExposurePath',
    props.rowList,
  );
  if (Number(code) === 0) {
    branchList.value = data;
  }
};
</script>
<style lang="scss" scoped>
.exposurePath-container {
  .path-head {
    text-align: right;
    > span {
      position: relative;
      margin-right: 24px;
      color: #8590b3;
    }
    .blue::before {
      position: absolute;
      top: 3px;
      left: -15px;
      display: inline-block;
      width: 10px;
      height: 10px;
      background: #3a7dff;
      border-radius: 2px;
      content: '';
    }
    .green::before {
      position: absolute;
      top: 3px;
      left: -15px;
      display: inline-block;
      width: 10px;
      height: 10px;
      background: #00b578;
      border-radius: 2px;
      content: '';
    }
    .yellow::before {
      position: absolute;
      top: 3px;
      left: -15px;
      display: inline-block;
      width: 10px;
      height: 10px;
      background: #ff931d;
      border-radius: 2px;
      content: '';
    }
  }

  .path-content {
    $width: 200px;
    .center-box {
      display: flex;
      overflow-x: auto;

      .path-box {
        flex: 1;
        display: inline-flex;
        flex-direction: column;
        align-items: center;
        padding: 40px 0 0 100px;
        margin: 10px auto 0;
        min-height: 315px;
        .branch {
          display: flex;
          justify-content: center;

          .path {
            width: $width;
            .line {
              position: relative;
              width: 1px;
              height: 60px;
              background: #8590b3;
              margin-left: 10px;
              margin-bottom: 20px;
              &.end-arrow {
                &::after {
                  content: '';
                  position: absolute;
                  left: -4px;
                  bottom: -8px;
                  border-top: 8px solid #8590b3;
                  border-left: 4px solid transparent;
                  border-right: 4px solid transparent;
                  border-bottom: 0;
                }
              }
              &.spot {
                &::before {
                  content: '';
                  position: absolute;
                  top: 20px;
                  left: -3.5px;
                  width: 8px;
                  height: 8px;
                  border-radius: 50%;
                  background-color: #00b578;
                }
              }
            }

            &:last-of-type {
              transform: translateX(-1px);
            }
          }
        }
        .target {
          margin-top: -10px;
          margin-left: -6px;
        }

        .target-name {
          position: absolute;
          left: 25px;
          width: 200px;
        }

        .multiple-target {
          display: flex;
          flex-direction: column;
          align-items: center;
          margin-top: -20px;
          padding-right: $width;
          transform: translateX(10px);
          box-sizing: border-box;
          &-line {
            width: 100%;
            height: 20px;
            border: 1px solid #8590b3;
            border-top: 0;
            border-radius: 0 0 6px 6px;
            box-sizing: border-box;
          }
          &-arrow {
            position: relative;
            height: 20px;
            width: 1px;
            background: #8590b3;
            margin-bottom: 10px;
            &::after {
              content: '';
              position: absolute;
              left: -4px;
              bottom: -8px;
              border-top: 8px solid #8590b3;
              border-left: 4px solid transparent;
              border-right: 4px solid transparent;
              border-bottom: 0;
            }
          }
        }

        .node {
          margin: 10px 0;
          position: relative;
          display: flex;
          align-items: center;
        }
      }
    }

    .existence {
      font-weight: 500;
      line-height: 18px;
      letter-spacing: 0px;
      color: #8590b3;
      margin-left: 15px;
      margin-right: 5px;
      display: inline-block;
      width: 100%;
      word-wrap: break-word;
      word-break: break-all;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 3;
    }
  }
}
</style>
